<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="sample"></div>
<script>
// See also external/wpt/html/semantics/forms/constraints/form-validation-checkValidity.html.

function checkValidityFor(html) {
  var sample = document.getElementById('sample');
  sample.innerHTML = html;
  return sample.firstChild.checkValidity();
}

test(() => {
  assert_true(checkValidityFor('<fieldset></fieldset>'));
}, 'checkValidity() for FIELDSET should return true.');

test(() => {
  assert_true(checkValidityFor('<fieldset><input required></fieldset>'));
}, 'checkValidity() for FIELDSET with an invalid INPUT should return true.');

test(() => {
  assert_true(checkValidityFor('<button>lorem ipsum</button>'));
}, 'checkValidity() for BUTTON should return true.');

test(() => {
  assert_true(checkValidityFor('<output></output>'));
}, 'checkValidity() for OUTPUT should return true.');

test(() => {
  assert_true(checkValidityFor('<object></object>'));
}, 'checkValidity() for OBJECT should return true.');

test(() => {
  assert_true(checkValidityFor('<select required>' +
    '  <option>empty</option>' +
    '  <option>another</option>' +
    '</select>'));
}, 'checkValidity() for SELECT without a placeholder OPTION should return true.');

test(() => {
  assert_false(checkValidityFor('<select required>' +
    '  <option value="" selected />' +
    '  <option value="X">X</option>' +
    '</select>'));
}, 'checkValidity() for SELECT with a placeholder OPTION should return false.');

test(() => {
  assert_true(checkValidityFor('<select required>' +
    '  <option value="X">X</option>' +
    '  <option value="" selected />' +
    '</select>'));
}, 'checkValidity() for SELECT with a selected empty second OPTION should return true.');

test(() => {
  assert_true(checkValidityFor('<form method="get">' +
    '<fieldset name="victim"></fieldset>' +
    '<input name="victim" type="text" value="lorem ipsum"/>' +
    '<button name="victim">lorem ipsum</button>' +
    '<select name="victim"></select>' +
    '<textarea name="victim"></textarea>' +
    '</form>'));
}, 'checkValidity() for FORM with valid controls should return true.');

test(() => {
  assert_false(checkValidityFor('<form method="get">' +
    '<fieldset name="victim"></fieldset>' +
    '<input name="victim" type="text" value="invalid" pattern="something"/>' +
    '<button name="victim">lorem ipsum</button>' +
    '<select name="victim"></select>' +
    '<textarea name="victim"></textarea>' +
    '</form>'));
}, 'checkValidity() for FORM with an invalid control should return false.');
</script>
</body>
